import { createRouter, createWebHistory } from 'vue-router'
import store from '@/store/index.js'
// 导入主页面组件
const Home = () =>
    import ('@/views/home/Home.vue')
    // 导入歌单详情组件
const Musics = () =>
    import ('@/views/Musics/Musics.vue')

// 导入搜索界面的组件
const Search = () =>
    import ('@/views/search/Search.vue')

// 导入登录组件
const Login = () =>
    import ('@/views/login/Login.vue')

// 导入个人信息组件
const infoUser = () =>
    import ('@/views/infoUser/infoUser.vue')

const routes = [
    // 主界面组件路由规则
    { path: '/', name: 'Home', component: Home },
    // 歌单详情组件路由规则
    { path: '/itemMusic', name: 'Musics', component: Musics },
    // 搜索界面的组件路由规则
    { path: '/Search', name: 'Search', component: Search },
    // 登录组件的路由规则
    { path: '/Login', name: 'Login', component: Login },
    // 个人信息的路由规则
    {
        path: '/infoUser',
        name: 'infoUser',
        component: infoUser,
        // 路由守卫，当没登录时直接跳转到登录组件
        beforeEnter: (to, from, next) => {
            // 判断本地是否有token值
            let token = sessionStorage.getItem('token')
            if (token) {
                next()
            } else {
                next('/Login')
            }
        }
    },
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

// 利用全局导航守卫，如果是前往登录页则不需要显示底部播放组件
router.beforeEach((to, from) => {
    if (to.path == '/Login') {
        store.state.isFooterMusic = false
    } else {
        store.state.isFooterMusic = true
    }
})
export default router